<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" destroy-on-close width="769px">
			<el-form
				ref="dialogFormRef"
				v-loading.fullscreen.lock="state.dialog.loading"
				:rules="rules"
				:model="state.ruleForm"
				size="default"
				label-width="120px"
			>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="职位名称" prop="position_name_zh">
							<el-input v-model="state.ruleForm.position_name_zh" placeholder="请输入职位名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="(英文)职位名称" prop="position_name_en">
							<el-input v-model="state.ruleForm.position_name_en" placeholder="请输入英文职位名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="职位类型" prop="type">
							<el-select v-model="state.ruleForm.type" placeholder="请选择" style="width: 100%">
								<el-option label="社会招聘" :value="1" />
								<el-option label="校园招聘" :value="2" />
								<el-option label="实习生招聘" :value="3" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="招聘类型" prop="position_type_zh">
							<el-input v-model="state.ruleForm.position_type_zh" placeholder="请输入招聘类型" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="(英文)招聘类型" prop="position_type_en">
							<el-input v-model="state.ruleForm.position_type_en" placeholder="请输入英文招聘类型" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="工作地点" prop="position_address_zh">
							<el-input v-model="state.ruleForm.position_address_zh" placeholder="请输入工作地点" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="(英文)工作地点" prop="position_address_en">
							<el-input v-model="state.ruleForm.position_address_en" placeholder="请输入英文工作地点" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门" prop="department_zh">
							<el-input v-model="state.ruleForm.department_zh" placeholder="请输入部门" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="(英文)部门" prop="department_en">
							<el-input v-model="state.ruleForm.department_en" placeholder="请输入英文部门" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="学历要求" prop="edu_requirements_zh">
							<el-input v-model="state.ruleForm.edu_requirements_zh" placeholder="请输入学历要求" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="(英文)学历要求" prop="edu_requirements_en">
							<el-input v-model="state.ruleForm.edu_requirements_en" placeholder="请输入英文学历要求" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="专业要求" prop="year_of_working_zh">
							<el-input v-model="state.ruleForm.year_of_working_zh" placeholder="请输入专业要求" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="(英文)专业要求" prop="year_of_working_en">
							<el-input v-model="state.ruleForm.year_of_working_en" placeholder="请输入英文专业要求" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="职位描述" prop="position_description_zh">
							<Editor v-model:get-html="state.ruleForm.position_description_zh" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="(英文)职位描述" prop="position_description_en">
							<Editor v-model:get-html="state.ruleForm.position_description_en" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="职位要求" prop="position_requirements_zh">
							<Editor v-model:get-html="state.ruleForm.position_requirements_zh" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="(英文)职位要求" prop="position_requirements_en">
							<Editor v-model:get-html="state.ruleForm.position_requirements_en" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { defineAsyncComponent, nextTick, reactive, ref } from 'vue';
const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useJobApi } from '/@/api/job';
import { fa } from 'element-plus/es/locale';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const state = reactive<{
	ruleForm: JobFormSchema;
	dialog: any;
}>({
	ruleForm: {
		position_name_zh: '',
		position_type_zh: '',
		type: '',
		position_address_zh: '',
		department_zh: '',
		edu_requirements_zh: '',
		year_of_working_zh: '',
		position_description_zh: '',
		position_requirements_zh: '',
		lang: 'zh',
		position_name_en: '',
		position_type_en: '',
		position_address_en: '',
		department_en: '',
		edu_requirements_en: '',
		year_of_working_en: '',
		position_description_en: '',
		position_requirements_en: '',
		sort: 1,
		status: 0,
	},
	dialog: {
		isShowDialog: false,
		type: 'add',
		title: '',
		submitTxt: '',
		loading: false,
	},
});

const rules = reactive<FormRules>({
	position_name_zh: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	position_type_zh: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	type: [
		{
			required: true,
			message: '请选择',
			trigger: 'change',
		},
	],
	position_address_zh: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	department_zh: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	edu_requirements_zh: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	year_of_working_zh: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	position_description_zh: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	position_requirements_zh: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	position_name_en: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	position_type_en: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	position_address_en: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	department_en: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	edu_requirements_en: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	year_of_working_en: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	position_description_en: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
	position_requirements_en: [
		{
			required: true,
			message: '请输入',
			trigger: 'blur',
		},
	],
});

// 打开弹窗
const openDialog = async (type: string, row: any) => {
	state.dialog.type = type;
	if (type === 'edit') {
		state.dialog.isShowDialog = true;
		nextTick(() => {
			state.dialog.loading = true;
		});
		const { result: resultZH } = await useJobApi().detail(row.id);
		const { result: resultEn } = await useJobApi().detail(row.id, { lang: 'en' });
		const resZh = resultZH?.[0] ?? {};
		const resEn = resultEn?.[0] ?? {};
		const formInfo = {
			id: resZh.id,
			position_name_zh: resZh.position_name,
			position_type_zh: resZh.position_type,
			position_address_zh: resZh.position_address,
			department_zh: resZh.department,
			edu_requirements_zh: resZh.edu_requirements,
			year_of_working_zh: resZh.year_of_working,
			position_description_zh: resZh.position_description,
			position_requirements_zh: resZh.position_requirements,
			// 英文
			position_name_en: resEn.position_name,
			position_type_en: resEn.position_type,
			position_address_en: resEn.position_address,
			department_en: resEn.department,
			edu_requirements_en: resEn.edu_requirements,
			year_of_working_en: resEn.year_of_working,
			position_description_en: resEn.position_description,
			position_requirements_en: resEn.position_requirements,
			type: resEn.type,
		};
		state.dialog.title = '修 改';
		state.dialog.submitTxt = '修 改';
		const oForm = {
			...state.ruleForm,
			...formInfo,
		};
		state.ruleForm = oForm;
		console.log(oForm);

		state.dialog.loading = false;
	} else {
		state.dialog.title = '新 增';
		state.dialog.submitTxt = '新 增';
		// 清空表单，此项需加表单验证才能使用
		nextTick(() => {
			dialogFormRef.value.resetFields();
		});
		state.dialog.isShowDialog = true;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = async () => {
	dialogFormRef.value.validate(async (valid: any) => {
		if (valid) {
			console.log('submit!');
			if (state.dialog.type === 'add') {
				await useJobApi().add(state.ruleForm);
				ElMessage.success('添加成功');
			} else {
				await useJobApi().edit(state.ruleForm.id as number, state.ruleForm);
				ElMessage.success('修改成功');
			}
			emit('refresh');
			closeDialog();
		}
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
